<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import type { FormInstance } from "element-plus";
import { ElSelectV2 } from "element-plus";
import FileUpload from "@/components/file-system/file-upload.vue";

import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import { DANGER_CHEMICAL_TYPE_OPTIONS} from "@/config/enum-options";
import type { WhManagerBsTbDangerChemicalSaveOrUpdateUsingPostBody } from "@/genapi/wh";
import { whManagerBsTbDangerChemicalSaveOrUpdateUsingPost } from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";
import { useCompanyStore } from "@/stores/company";
import { injectState } from "../state";

defineOptions({ name: "DetailDialog" });

const companyStore = useCompanyStore();

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formRef = shallowRef<FormInstance>();
const { page } = injectState()!;

const dialogType = ref<"add" | "edit" | "detail" | string>();

const titleMap: Record<string, string> = {
	add: "新增",
	edit: "编辑",
	detail: "详情",
};

const file = computed({
	get() {
		if (model.value.fileId) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.fileId = value?.[0]?.id;
	},
});

const beforeClose = async () => {
	if (dialogType.value !== "detail") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (type = "add", value = {} as any) => {
	dialogType.value = type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<WhManagerBsTbDangerChemicalSaveOrUpdateUsingPostBody>(
	{} as any,
);

const { execute, isLoading } = useAsync(async () => {
	await formRef.value?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});
	await whManagerBsTbDangerChemicalSaveOrUpdateUsingPost({
		data: {
			...model.value,
			enterpriseId: companyStore.currentCompanyId,
		},
	});
	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
});
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const children: FormDescChild[] = [
	{
		label: "责任人员",
		prop: "responsiblePerson",
		// rule: [{ required: true, message: '请输入责任人责任人员', trigger: 'blur' }],
		span: 1,
		formItem: () => (
			<ElInput
				v-model={model.value.responsiblePerson}
				clearable
				placeholder="请输入责任人责任人员"
			/>
		),
		descItem: () => <span>{model.value.responsiblePerson}</span>,
	},
	{
		label: "责任人联系电话",
		prop: "connectPhone",
		// rule: [{ required: true, message: '请输入责任人联系电话', trigger: 'blur' }],
		span: 1,
		formItem: () => (
			<ElInput
				v-model={model.value.connectPhone}
				clearable
				placeholder="请输入责任人联系电话"
			/>
		),
		descItem: () => <span>{model.value.connectPhone}</span>,
	},
	{
		label: "危化品种类",
		prop: "type",
		rule: [{ required: true, message: "请选择危化品种类", trigger: "blur" }],
		span: 2,
		formItem: () => (
			<ElSelectV2
				options={[...DANGER_CHEMICAL_TYPE_OPTIONS]}
				v-model={model.value.type}
				clearable
				placeholder="请选择危化品种类"
			/>
		),
		descItem: () => (
      <div>
        <span v-show={model.value.type === '1'}>爆炸品</span>
      <span v-show={model.value.type === '2'}>压缩气体和液化气体</span>
      <span v-show={model.value.type === '3'}>易燃液体</span>
      <span v-show={model.value.type === '4'}>易燃固体、自燃物品和遇湿易燃物品</span>
      <span v-show={model.value.type === '5'}>氧化剂和有机过氧化物</span>
      <span v-show={model.value.type === '6'}>有毒物质</span>
      <span v-show={model.value.type === '7'}>腐蚀品</span>
      <span v-show={model.value.type === 'UNKNOWN'}>--</span>
      </div>
    ),
	},
	{
		label: "危化品名称",
		prop: "name",
		// rule: [{ required: true, message: '请输入典型工艺', trigger: 'blur' }],
		span: 2,
		formItem: () => (
			<ElInput
				v-model={model.value.name}
				clearable
				placeholder="请输入危化品名称"
			/>
		),
		descItem: () => <span>{model.value.name}</span>,
	},
	{
		label: "安全控制要求",
		prop: "controlSafeRequire",
		// rule: [{ required: true, message: '请输入安全控制要求', trigger: 'blur' }],
		span: 2,
		formItem: () => (
			<ElInput
				v-model={model.value.controlSafeRequire}
				clearable
				placeholder="请输入安全控制要求"
			/>
		),
		descItem: () => <span>{model.value.controlSafeRequire}</span>,
	},
	{
		label: "重点监控参数",
		prop: "monitorParams",
		// rule: [{ required: true, message: '请输入重点监控参数', trigger: 'blur' }],
		span: 2,
		formItem: () => (
			<ElInput
				v-model={model.value.monitorParams}
				clearable
				placeholder="请输入重点监控参数"
			/>
		),
		descItem: () => <span>{model.value.monitorParams}</span>,
	},
	{
		label: "控制方案",
		prop: "controlPlan",
		// rule: [{ required: true, message: '请输入控制方案', trigger: 'blur' }],
		span: 2,
		formItem: () => (
			<ElInput
				v-model={model.value.controlPlan}
				clearable
				placeholder="请输入控制方案"
			/>
		),
		descItem: () => <span>{model.value.controlPlan}</span>,
	},
	{
		label: "应急预案",
		prop: "planFileId",
		// rule: [{ required: true, message: '请输入应急预案', trigger: 'blur' }],
		span: 2,
		formItem: () => (
			<FileUpload v-model={file.value} limit={1} w="100%">
				<el-button type="primary">
					{{
						icon: () => <el-icon class="i-custom:add"></el-icon>,
						default: () => "增加附件",
					}}
				</el-button>
			</FileUpload>
		),
		descItem: () => (
			<FileUpload v-model={file.value} limit={1} disabled={true} />
		),
	},
];
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="titleMap[dialogType!]"
		:before-close="beforeClose"
		max-h="884px!"
		w="707px!"
	>
		<el-scrollbar>
			<FormDesc
				ref="formDescRef"
				:type="dialogType === 'detail' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:children="children"
				:column="2"
			/>
		</el-scrollbar>
		<template v-if="dialogType !== 'detail'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确认</el-button
			>
		</template>
	</PromiseDialog>
</template>
